import { Input, SelectProps } from "antd"
import { FC, useEffect, useState } from "react"

import { queryRiskLevelDictList } from "@/api"
import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useLocale } from "@/locales"

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const RiskLevelSelector = (props: any): JSX.Element => {
	const {
		merchantId = undefined,
		windControlType,
		selectorProps,
		name = "windControlLevelName",
		rules,
		setValue,
		notMutiple,
		placeholder
	} = props
	const { formatMessage } = useLocale()
	const [options, setOptions] = useState<SelectProps["options"]>([])
	const [loading, setLoading] = useState(false)
	useEffect(() => {
		if (setValue) setValue(undefined)
		setLoading(true)
		;(async () => {
			if (!windControlType) {
				setOptions([])
				return
			}
			const [err, data] = await queryRiskLevelDictList({ windControlType, merchantId })
			setLoading(false)
			if (err) {
				setOptions([])
				return
			}
			setOptions(
				data.map(item => ({ value: props.byId ? item.id : item.windControlLevelName, label: item.windControlLevelName })) //todo: 后端在使用该传参有的用id，有的用name，建议统一一下
			)
		})()
	}, [windControlType, merchantId])

	return (
		<SFormItem name={name} label={`${formatMessage({ id: "label.risk_level" })}:`} rules={rules}>
			<StyleSelect
				mode={notMutiple ? "undefined" : "multiple"}
				placeholder={placeholder ?? formatMessage({ id: "label.select_all" })}
				allowClear
				options={options}
				loading={loading}
				{...selectorProps}
			/>
		</SFormItem>
	)
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export const RiskLevelInput: FC<any> = props => {
	const { rules, disable, labelProps, inputProps } = props
	const { formatMessage } = useLocale()
	return (
		<SFormItem name="windControlLevelName" label={`${formatMessage({ id: "label.risk_level" })}:`} rules={rules} {...labelProps}>
			<Input placeholder={formatMessage({ id: "label.please_inter" })} allowClear disabled={disable} {...inputProps} />
		</SFormItem>
	)
}
